// 目标： three。js三要素
// 原理： 基于cavans标签绘制像素点（位置，颜色等）在平面上计算出3D效果
// 1,下载并引入threeJs库
import * as THREE from 'three';
// 引入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 2，从文档上复制3要素的创建代码

// 创建3d场景
const scene = new THREE.Scene();

// 创建摄影对象（透视摄相机：也就是近大远小）构造受四个参数影响，
/* 
75：相机的视场角度（FOV），以度为单位（共360度）垂直方向的角度
window.innerWidth / window.innerHeight：相机的宽高比，这里使用了浏览器窗口的宽高比。（水平方向的角度）
0.1：相机的近裁剪面，即相机能看见的最近距离。
1000：相机的远裁剪面，即相机能看见的最远距离。
*/
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );

// 创建了一个THREE.WebGLRenderer对象，它负责将3D场景渲染到一个HTML元素中。WebGLRenderer是Three.js中用于WebGL渲染的核心类。
const renderer = new THREE.WebGLRenderer();

// 这行代码设置渲染器的大小，使其与浏览器窗口的大小相匹配。
renderer.setSize( window.innerWidth, window.innerHeight );

// 这行代码将渲染器的domElement（一个<canvas>元素）添加到文档的<body>中，这样渲染器就可以在页面上显示渲染的内容了。
document.body.appendChild( renderer.domElement );

// 创建一个绿色的立方体

// boxGeometry立方体（宽,高,深）1单位大小（three。js独有的单位）
const geometry = new THREE.BoxGeometry( 3, 3, 3 ); 
// 材质： 决定要一个什么颜色的立方体，MeshBasicMaterial网格（面）基础纯颜色（0x16进制颜色）
const material = new THREE.MeshBasicMaterial( { color: 0xFFCF54 } );
// 创建物体，网格材质面
const cube = new THREE.Mesh( geometry, material );

// 把立方体加入canvas中
scene.add( cube );

// 使用轨道控制器
const controls = new OrbitControls( camera, renderer.domElement ); // 参数1，控制的摄像机，参数2鼠标交互的标签（监听canvas画布鼠标滑动交互）
camera.position.set(0,5,20) // 设置摄像机的位置
// controls.update();

// 设置一个函数用来显示坐标轴线
function createAxes (){
    // 参数： 坐标轴长度
    const axesHelper = new THREE.AxesHelper(20)
    // 坐标轴也是一个物体需要加入到场景世界中显示
    scene.add(axesHelper)
    
}
const axes = new THREE.AxesHelper(10)
cube.add(axes)

// 1， 位移（x,y,z)参考父级路由的坐标系，改变物体在中心轴的位置 
// geometry.translate(5,0,0)
cube.position.set(10,0,0)

// 2，旋转角度，参考自身的坐标系y
// cube.rotation.x = Math.PI / 2

// 3，缩放， 沿着“自身”轴线缩放,中心点不懂,向某个周两边拉伸缩小
// cube.scale.z = 2


// 轨道控制器，用来显示界面（使用循环渲染的方式来显示
function animate() {
	requestAnimationFrame( animate );
	controls.update();
    // cube.rotation.x -= 0.01 // 绕自身x轴逆时针旋转
    // cube.rotation.y -= 0.01 // 绕自身y轴逆时针旋转
    // cube.scale.z += 0.01 // 沿z轴增加数据
	renderer.render( scene, camera );
}
// 监听window窗口的变化
function resize () {
    window.addEventListener('resize', () => {
        // 设置画布的宽高
        renderer.setSize(window.innerWidth,window.innerHeight)
        camera.aspect = window.innerWidth/window.innerHeight
        // 更新摄像机矩阵空间（让摄像机重新计算每个像素点位置和大小）
        camera.updateProjectionMatrix()
    })
}
resize()
createAxes()
animate()






